iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 22
3

昨天介紹完什麼是 API ,各位捧油還記得嗎?
接下來,我們就要來看看 API 資料格式「JSON」長什麼樣子囉

API 資料格式有哪些?

一般常見的格式有兩種:

  • XML
    Extensible Markup Language,是一種標記式 (markup) 語言。
    這種文件格式,跟 HTML Tag 語法很像,有使用 < > 來定義跟標記,而在 < ... > 中間會夾帶著資料內容,各位捧油也可以想像成是 HTML Tag 的延伸。

  • JSON:它的資料格式有參考 JavaScript Object,所以有在撰寫 JS 的捧油會覺得 JSON 呈現上比 XML 來得更加容易理解。

JSON

JavaScript Object Notation (JSON) 為將結構化資料 (structured data) 呈現為 JavaScript 物件的標準格式,常用於網站上的資料呈現、傳輸 (例如將資料從伺服器送至用戶端,以利顯示網頁)。

Ref: MDN web docs

而 JSON 資料格式也因為與 XML 格式來得體積輕量、易於傳遞與閱讀,而更被廣泛使用。 XML 格式實務上依然還是會用到,像是一些公家機關釋出的 API 會提供以上兩種格式。

而在回傳的資料格式設計上,API 的設計者是 可以自行決定資料回傳的格式
所以在一般來說,在專案 / 產品開發前期,較明確的功能開出來之後,前後端便會整理需要的格式來互相討論,部分公司是會由主管去定義,所以一樣也是看公司規定唷~~

而阿宅 PO 的公司後端同仁,會將我們前後端討論出來的自訂的格式表,稱為:Response Format

簡單帶大家看一下 JSON 格式

{
  "company" : "XXX",
  "members" : [
    {
      "name" : "Molecule Man",
      "age" : 29,
      "secretIdentity" : "Dan Jukes",
      "powers" : [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    },
    {
      "name" : "Madame Uppercut",
      "age" : 39,
      "secretIdentity" : "Jane Wilson",
      "powers" : [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    }
  ]
}

有沒有覺得很熟悉? 是的,他就是物件包陣列,陣列包物件的格式
最外層也不一定是使用物件 {} ,使用 [] 也是可以的

另外,補充幾點知識 (Ref: MDN web docs):

  • JSON 是純粹的資料格式 — 僅具備屬性,而無函式
  • JSON 需要雙引號,才能使用\有效。所以最安全的方法就是以雙引號撰寫之
  • 單一個逗號或冒號放錯位置,也會讓 JSON 檔案出錯而無法運作。 可透過如 JSONLint 的應用程式檢驗 JSON。
  • 不限於陣列或物件,只要是符合標準 JSON 物件形式的任何資料,都可以夾帶進 JSON 檔案中。

明天就進入最常碰到的 Call API
敬請期待~(啾咪)


上一篇
設計看JS - Hello Web API
下一篇
設計看JS - API 怎麼 Call ?
系列文
前端設計轉前端工程師-JS踩坑雜記 30 天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言